// PlateFilter组件样式 - 嵌套语法组织
.plate-filter {

  background-color: #fff;
  border-bottom: 1px solid #eee;

  // 原生滚动容器
  .scroll-container {
    width: 100%;
    overflow-x: auto; // 水平滚动
    -webkit-overflow-scrolling: touch; // 移动端平滑滚动
    scrollbar-width: none; // 隐藏Firefox滚动条

    // 隐藏Chrome/Safari滚动条
    &::-webkit-scrollbar {
      display: none;
    }

    // 板块列表
    .plate-list {
      display: flex;
      padding: 10px 0;
      min-width: 100%; // 确保容器宽度

      // 板块项
      .plate-item {
        padding: 6px 16px;
        margin: 0 4px;
        border-radius: 20px;
        font-size: 14px;
        color: #666;
        background-color: #f5f5f5;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap; // 防止文字换行

        // 激活状态
        &.active {
          background-color: #36d399;
          color: white;
          font-weight: 500;
        }

        // 第一个和最后一个项的边距调整
        &:first-child {
          margin-left: 12px;
        }

        &:last-child {
          margin-right: 12px;
        }
      }
    }
  }
}
